import React from 'react'
import { Button, Tabs } from 'antd-mobile'
import { UndoOutline } from 'antd-mobile-icons'
import { Space, Checkbox } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
const Index = () => {
    const nav = useNavigate()
    const ss = () => {
        nav(`/ticke?&start=北京西站&end=上海市&date=${Date.now()}&isSpeed=true`)
    }
    return (
        <div>
            <Tabs>
                <Tabs.Tab title='机票' key='1'>
                    机票
                </Tabs.Tab>
                <Tabs.Tab title='特价机票' key='2'>
                    特价机票
                </Tabs.Tab>
                <Tabs.Tab title='火车票' key='3'>
                    <Tabs>
                        <Tabs.Tab title='单程' key='fruits'>
                            <div style={{ textAlign: 'center', fontSize: '20px' }}>
                                <span style={{ float: 'left' }}>北京西站</span>
                                <span><UndoOutline /></span>
                                <span style={{ float: 'right' }}>上海市</span>
                            </div>
                            <hr />
                            <div>
                                <span style={{ fontSize: '20px' }}>4月8日明天</span>
                            </div>
                            <hr />
                            <div>
                                <span style={{ float: 'left' }}><Checkbox.Group><Space direction='vertical'><Checkbox value='1'>学生票</Checkbox></Space></Checkbox.Group></span>
                                <span style={{ float: 'right' }}><Checkbox.Group><Space direction='vertical'><Checkbox value='2'>只看高铁</Checkbox></Space></Checkbox.Group></span>
                            </div>
                            <div style={{ marginTop: '50px' }}>
                                <Button style={{ width: '100%', background: 'green', color: '#fff' }} onClick={ss}>搜索火车</Button>
                            </div>
                        </Tabs.Tab>
                        <Tabs.Tab title='往返' key='vegetables'>
                            往返
                        </Tabs.Tab>
                    </Tabs>
                </Tabs.Tab>
                <Tabs.Tab title='汽车票' key='4'>
                    汽车票
                </Tabs.Tab>
                <Tabs.Tab title='送接/租车' key='5'>
                    租车
                </Tabs.Tab>
            </Tabs>
        </div>
    )
}

export default Index
